<template>
  <div class="wrapper">
    <!-- 文件预览 -->
    <div class="l-rblock" style="background: #fff;" v-if="['xls', 'xlsx', 'txt', 'csv', 'html', 'pdf', 'PDF', 'XLS', 'XLSX', 'TXT', 'doc', 'docx', 'DOCX'].includes(
      lr_getFileEex(selectFile.f_FileName))">
      <iframe :src="previewUrl" class="l-iframe" ref="iframe" frameborder="0"></iframe>
    </div>
    <!-- 图片预览 -->
    <div class="l-rblock learun-img-preview"
      v-else-if="['jpg', 'JPG', 'gif', 'png', 'PNG', 'bmp', 'jpeg', 'svg'].includes(lr_getFileEex(selectFile.f_FileName))">
      <img class="learun-img-preview-img" :src="previewUrl" alt="">
    </div>
    <!-- 文件无法预览 进行下载 -->
    <div class="l-rblock learun-not-preview" v-else>
      <i class="icon" :class="lr_getFileIcon(selectFile.f_FileName).icon"
        :style="{ color: lr_getFileIcon(selectFile.f_FileName).color }"></i>
      <p class="text">很抱歉，无法在浏览器预览 {{ lr_getFileEex(selectFile.f_FileName) }} 文件,请下载后查看</p>
      <el-button @click="handleDown(selectFile)" class="btn" type="primary">{{ $t('下载文件') }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "l-file-preview",
  components: {},
  props: ['selectFile'],
  data() {
    return {
    };
  },
  watch: {},
  computed: {
    selectId() {
      console.log("🚀 ~ selectId ~ this.selectFile:", this.selectFile)
      return this.selectFile.f_Id || ""
    },

    previewUrl() {
      if (this.selectId) {
        return `${this.apiUrl}system/annexesfile/preview/${this.selectId}?token=${this.token}`
      }
      return ""
    },

  },
  mounted() {
    this.init()
  },
  methods: {
    init() { },
    // 新窗口打开pdf
    openPdfView(previewUr) {
      window.open(previewUr)
    },
    // 文件下载
    handleDown(row) {
      this.$downFile(
        `${this.apiUrl}system/annexesfile/${row.f_Id}?token=${this.token}`
      )
    },
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
}

.btn-openPdf {
  position: absolute;
  bottom: 4px;
  left: 15px;
  z-index: 999;
}
</style>